<template>
  <footer class="footer">
    <div class="container flex">
      <div class="left">

        <div class="item">
          <h2 class="title">新手入门</h2>
          <a :href="ui.doc" target="_blank">Simple UI介绍</a>
          <a :href="ui.doc" target="_blank">Simple UI文档</a>
          <a :href="pro.doc" target="_blank">Simple Pro介绍</a>
          <a :href="pro.doc" target="_blank">Simple Pro文档</a>
        </div>

        <div class="item">
          <h2 class="title">在线体验</h2>
          <a :href="ui.demo" target="_blank">Simple UI 演示</a>
          <a :href="pro.demo" target="_blank">Simple Pro 演示</a>
          <a :href="pro.sdc" target="_blank">可视化图表设计</a>
        </div>

        <div class="item">
          <h2 class="title">客服帮助</h2>
          <nuxt-link :to="{name:'post-topic'}" target="_blank">社区提问</nuxt-link>
          <a href="javascript:;" @click="visible=true">QQ群</a>
          <nuxt-link to="/scene/custom">付费定制</nuxt-link>
          <nuxt-link :to="{name:'verify'}">申请认证</nuxt-link>
        </div>

        <div class="item">
          <h2 class="title">其他</h2>
          <nuxt-link to="/scene/custom">业务合作</nuxt-link>
          <nuxt-link to="/scene/invoice">发票开具</nuxt-link>
          <a href="https://github.com/newpanjing/simpleui" target="_blank">GitHub</a>
          <a href="https://gitee.com/tompeppa/simpleui" target="_blank">码云(gitee)</a>
        </div>

      </div>
      <div class="right">
        <h2 class="title">关注我们</h2>
        <img style="width: 100px" src="~/static/img/qrcode.jpeg"/>
      </div>
    </div>
    <div class="container">
      <div class="link">
        <nuxt-link to="/scene/about">关于我们</nuxt-link>
        <nuxt-link to="/scene/contact">联系我们</nuxt-link>
        <nuxt-link to="/scene/agreement">用户协议</nuxt-link>
        <nuxt-link to="/scene/privacy">隐私政策</nuxt-link>
        <a href="/sitemap.xml" target="_blank">网站地图</a>
      </div>
      <div class="link">
        <span>Copyright © 2022 深圳市十二点有限公司</span>
        <a href="http://beian.miit.gov.cn/" target="_blank">粤ICP备18132421号</a>
      </div>
    </div>
    <ChatGroup :visible="visible" @close="visible = false"/>
  </footer>
</template>

<script>
import config from "@/utils/config";

export default {
  name: "Footer",
  data() {
    return {
      visible: false,
      pro: config.pro,
      ui: config.ui
    }
  }
}
</script>

<style scoped lang="less">

.footer {
  background-color: #000;
  padding-top: 50px;
  padding-bottom: 50px;

  .title {
    color: var(--color);
    font-size: 20px;
  }

  .left {
    display: flex;
    text-align: center;

    h2 {
      margin-bottom: 30px;
    }

    a {
      display: block;
      margin-bottom: 20px;
      font-size: 14px;
    }

    .item {
      flex: 1;
    }
  }

  .right {
    text-align: center;
    border-left: #333 1px solid;
    padding-left: 20px;
  }

  .link {
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
  }
}


@media (prefers-color-scheme: dark) {
  .footer {
    background-color: #1f2327;
    border-top: 1px solid var(--border-color);
  }

}
</style>
